<style lang="less" scoped>
.search-label {
  font-size: 14px;
  padding-right: 10px;
}
.search {
  width:400px;
  margin-left: 20px;
}
</style>

<template lang="pug">
#admin-vote.admin
  span(class="search-label") 搜索方式:
  el-radio-group(v-model="selectType")
    el-radio(label="character") 文字
    el-radio(label="user") 用户
    el-input(class="search",placeholder='请输入文字搜索', icon='search', v-model='search', :on-icon-click='handleIconClick')
  template
    el-table(:data='items', border='', style='width: 100%')
      el-table-column(type="index", width="100",label="索引")
      el-table-column(prop='character', width="200",align="center", label='文字')
      el-table-column(prop='status',align="center", label=' 点赞数', width="200")
      el-table-column(prop='status',align="center", label=' 点踩数', width="200")
      el-table-column(prop='user.nickname',align="center", label='用户名', width="150")
      el-table-column(label='操作',align="center")
        template(scope='scope')
          el-button(size='small',
                    type='danger',
                    @click='handleDelete(scope.$index, scope.row)') 删除
  el-pagination(@size-change='handleSizeChange',
                @current-change='handleCurrentChange',
                :current-page="1",
                :page-size='100',
                layout='total, prev, pager, next',
                :total='total')
</template>

<script>
export default {
  name: 'admin-vote',
  computed: {
    items() {
      return this.$store.state.adminItems
    },
    total() {
      return this.$store.state.count; // 列表总数
    },
  },
  data() {
    return {
      start: 0,
      search: '',
      selectType:'', // 查询方式
    }
  },
  methods: {
    fetch(start) {
      const _this = this
      const cb = function(result) {
        _this.$set(_this, 'start', start)
      }
      this.$store.dispatch('FETCH_ADMIN_ITEMS', {
        cb: cb,
        url: 'votes',
        data: {
          start: start,
        }
      })
    },
    handleIconClick() {

    },
    handleDelete(index, row) {
      const _this = this
      this.$store.dispatch('DELETE_ADMIN_ITEM', {
        url: `vote/${row._id}`,
        msg: _this.$message,
        cb: _this.fetch,
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.fetch(val - 1)
      console.log(`当前页: ${val}`);
    }
  },
  beforeMount() {
    this.fetch(0)
  }
}
</script>

<style lang="stylus" scoped>
.el-table, .el-pagination {
  margin-top: 20px;
}


.add-btn {
  margin-left: 30px;
}

.el-table {
  margin-top: 30px;
}
</style>
